<template>
	<view style="padding: 20rpx 40rpx;background-color: #fff;">
		<view style="font-weight: 600;margin-bottom: 20rpx;">{{data.title}}</view>
		<u-parse :content="data.content" v-if="imageList.length<=0"></u-parse>
		<view style="display: grid;grid-template-columns: 1fr 1fr;grid-gap:20rpx" v-else>
			<view style="position: relative;width: 100%;" v-for="(item,index) in imageList" >
				<image @click="preiveImage(index)" :src="item" mode="aspectFill"
					style="height: 580rpx;width: 100%;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);border-radius: 8rpx;">
				</image>
				<view
					style="font-weight: bold;bottom: 0;position: absolute;width: 100%;background: rgba(255,255,255,0.6);line-height: 80rpx;text-align: center;font-size: 32rpx;color: #D631E7;">
					<view @click="tapImage()"><text>点击查看详情</text></view>
				</view>
			</view>
		</view>
		<view style="text-align: center;font-size: 22rpx;color: #666666;margin-top: 65rpx;">
			<view>
				{{data.name}}
				<text style="color: #0F29D3;">{{data.code}}</text>
			</view>
			<view>联系方式：{{data.mobile}}</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view @click="tap()"
			style="background: #FFAE03;line-height: 112rpx;position: fixed;bottom: 0rpx;width: 100vw;left:0;text-align: center;font-size: 22rpx;color: #666666;">
			<view class="text-aniamte">
				<text style="font-weight: bold;font-size: 40rpx;color: #FF2121;">点击免费领取福利</text>
			</view>
		</view>
		<u-popup mode="center" :show="show" overlayOpacity="0.9">
			<view style="width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;position: relative;">
				<image src="/static/icon_close.png" style="width: 30rpx;height: 30rpx;position: absolute;right: 40rpx;top: 80rpx;" @click="show=false"></image>
				<swiper :current="current" style="width: 100%;height: 65%;">
					<swiper-item v-for="item in imageList" style="width: 100%;height: 100%;">
						<image @click="tapImage" style="width: 100%;height: 100%;" :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				data: {
					content: '',
					title: '',
					code: '',
					mobile: '',
					name: '',
					url: ''
				},
				imageList: [],
				show:false,
				current:0
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		onLoad() {
			this.init()
			let id = this.getParam()
			this.$Api['article'].getArticle({
				id,
			}).then(res => {
				this.data = res.data
				this.imageList = this.handleImage(this.data.content)
				uni.setNavigationBarTitle({
					title: this.data.title
				})
			})
		},
		watch:{
			show(val){
				if(val){
					console.log(val);
					window.history.pushState(null, null, document.URL)
				}
			}
		},
		methods: {
			tapImage(){
				window.open(this.data.url)
			},
			handleImage(richText) {
				var images = [];
				richText.replace(/<img [^>]*src=['\"]([^'\"]+)[^>]*>/g, function(match, capture) {
					images.push(capture);
				});
				return images;
			},
			tap() {
				window.open(this.data.url)
			},
			preiveImage(index) {
				this.current=index
				this.show =true
				// uni.previewImage({
				// 	urls: this.imageList,
				// 	current: item,
				// 	success: () => {
				// 		window.history.pushState(null, null, document.URL)
				// 	}
				// })
			},
			getParam() {
				let id;
				let url = window.location.href
				if (url.includes('#')) {
					id = url.split('id=')[1]
				} else {
					id = url.split('?')[1]
				}
				return id
			},
			init() {
				window.addEventListener('popstate', () => {
					this.show=false
				})
			}
		}
	}
</script>
<style scoped>
	.detail {
		animation-duration: 0.5s;
		animation-name: animation6shape1;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}

	p {
		margin-bottom: 22rpx;
		font-size: 28rpx;
		color: #000000;
		line-height: 47rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
	}

	.text-aniamte {
		animation-duration: 0.5s;
		animation-name: animation6shape1;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}

	@keyframes animation6shape1 {
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		50% {
			transform: scale(1.2);
			/*放大1.1倍*/
		}
	}
</style>